<#include '/admin/header.html' >
<style>
 .layui-btn{
  background:#1E9FFF;
  }
</style>
<div  class="admin-main">
   <div>
        <!--提示区域  -->
        <div class="page_explain">
           <h2>操作提示</h2>
            <ul>
                <li><span>·</span>可以添加不同规格，在添加商品或者类型中，选择当前不同的规格。</li>
                <li><span>·</span>规格用途：比如前台购买鞋子，规格就是尺寸，颜色等等。。</li>
                <li><span>·</span>关于库存：比如一个商品有不同规格，那么不同规格的商品，库存也是不一样的，可以按规格来进货。</li>
            </ul>
        </div>
        <!--按钮操作  -->
        <div class="table_control">
            <div class="table_opera">
                <button type="button" id="addspec" title="添加" class="layui-btn layui-btn-primary " ><i class="icon iconfont icon-llalbumshopselectorcreate"></i></button>
                <button type="button" id="deletespec" title="删除" class="layui-btn layui-btn-primary " onclick="delSpec();"><i class="icon iconfont icon-guanbi1"></i></button>
                <button type="button" title="提示" class="layui-btn layui-btn-primary " id="explain"><i class="icon iconfont icon-tishi1"></i></button>
            </div>
        </div>
   </div>
   <!--表格区域  -->
   <form id="specform">
      <table id="specdata" class="layui-table site-table table-hover" width="100%" lay-skin="line"> 
        <thead>
        <tr>
            <th><input type='checkbox'  class='btn-checkall fly-checkbox' id='selected-all'></th>
            <th>规格名称</th>
            <th>类型</th>
            <th>操作</th>
        </tr>
        </thead>
      </table>
      <!--传值等操作(暂定)  -->
      <div id="addBrand" ></div>
   </form>
</div>

<!--js区域  -->
<script>
var table;
$(function(){
	
	 table = $('#specdata').DataTable({
		"language": {
	        "url": "${staticserver}/media/zh_CN.txt"
	    },
	    "processing": true,
	    "serverSide": true,
	    "ordering": false,
	    "searching": false,
	    "lengthChange": false,
	    ajax: {
	        //指定数据源
	        type:"post",
	        url: '${ctx}/shop/admin/spec/list-json.do',
	    },
	    columns: [ //定义列
            {"data": function (obj) {
                return '<input type="checkbox" name="spec_id" class="fly-checkbox" value=' + obj.spec_id + '>';
            		}},
	        {data: "spec_name"},
	        {"data": function (obj) {
	    		if(obj.spec_type==0){
	    			return '文字';
	    		}
	    		if(obj.spec_type==1){
	    			return '图片';
	    		}
            }},
	        {data: null,"render": function(data, type, row) {
	        	return "<a class='layui-btn layui-btn-small _aa' name='change_btn' onclick='editSpec("+data["spec_id"]+")'>操作</a>";		//获取值:data["brand_id"]
	       	}}
	     ]
	});
	
	 //添加规格
	$("#addspec").click(function(){
	   	layer.open({
            title:"添加规格",//标题
            maxmin :true,//右上角可否放大缩小
            type:2,//弹框的类型
            shade: [0.3, '#000'],//黑色背景
            shadeClose:false,//黑色背景是否可以点击关闭
            content:"${ctx}/shop/admin/spec/add.do",//内容的URL
            area:['630px','500px'],//弹框大小
            scrollbar: false,//是否允许浏览器出现滚动条
        });
	});
});

//修改规格
function editSpec(specId){
	layer.open({
        title:"修改规格",//标题
        maxmin :true,//右上角可否放大缩小
        type:2,//弹框的类型
        shade: [0.3, '#000'],//黑色背景
        shadeClose:false,//黑色背景是否可以点击关闭
        content:ctx+"/shop/admin/spec/edit.do?specId="+specId,//内容的URL
        area:['630px','500px'],//弹框大小
        scrollbar: false,//是否允许浏览器出现滚动条
    });
}

//删除规格
function delSpec(){
	var check = $("input[name='spec_id']").is("input:checked");
	if(check == false){
		alert("请选择删除的规格");
		return false;
	} 
	if (!confirm("确认要删除规格吗？")) {
		return false;
	}
   var options = {
		   url:ctx+"/shop/admin/spec/delete.do",
			type:"post",
			dataType:"json",
			success:function(data){
				if(data.result==1){
					$.Loading.success(data.message);
					table.ajax.url(ctx+"/shop/admin/spec/list-json.do").load();
				}else{
					$.Loading.error(data.message);
				}
			}
   };
   $("#specform").ajaxSubmit(options);
}
</script>
<#include '/admin/footer.html' >
